<template>
    <div class="w1016">
        <div class="control">
            <div class="control-add" @click="add">增加</div>
            <div class="control-change" @click="change">修改</div>
            <div class="control-delete" @click="del">删除</div>
        </div>
        <table ref="list" border="1" height="100" width="100%">
            <tr height="50" bgcolor="DarkGray">
                <td><input type="checkbox"  @change="selectedall"></td>
                <td>序号</td>
                <td>订单编号</td>
                <td>收货人姓名</td>
                <td>收货人手机号</td>
                <td>备注</td>
                <td>支付时间</td>
            </tr>
            <tr v-for="(item , index) in dataArr" :key="index" height="30" bgcolor="white">
                <td><input type="checkbox" v-model="item.flag"></td>
                <td>{{index+1}}</td>
                <td>{{item.order}}</td>
                <td>{{item.name}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.paystate}}</td>
                <td>{{item.time}}</td>
            </tr>
            
        </table>
        <SpringBox v-show="isShow" ref="box"/>

    </div>
</template>

<script>
import SpringBox from "./springBox.vue";
export default {
    components:{
        SpringBox,
    },
    data() {
        return {
            dataArr:[
                {flag:false, order : "78732837873283",name:"张三",phone:"13333333333",paystate:"新客户",time:"2020-09-09"},
                {flag:false, order : "78732837865656",name:"李四",phone:"13444444444",paystate:"老客户",time:"2020-10-10"},
            ],
            selectedAll:false,
            isShow:false,
        }
    },
    methods: {
        add(){
            this.$refs.box.initData({},true);
            this.isShow = true;
        },
        change(){
            
            for(var i = 0; i < this.dataArr.length; i++){
                var item = this.dataArr[i];
                if (item.flag){
                    this.$refs.box.initData(item,false);
                    this.isShow = true;                    
                    alert('111');
                    break;
                }
            }
            if(!this.isShow){
                alert('请选择一条数据');
            }
        },
        del(){
            this.dataArr = this.dataArr.filter((item,index) => !item.flag)
        },
        selectedall(){
            
            for (const key in this.dataArr) {
                if (Object.hasOwnProperty.call(this.dataArr, key)) {
                    const element = this.dataArr[key];
                    element.flag = !this.selectedAll;
                }
            }
            this.selectedAll = !this.selectedAll;
        }
        
    },
}
</script>

<style scoped>
.w1016{
    width: 100%;
    height: 100%;
    background-color: #fff;
    margin: 0;
    position: relative;
}

.control{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin-bottom: 30px;
}

.control-add{
    height: 20px;
    line-height: 20px;
    color: black;
    font-size: 10px;
    padding: 0 10px;
    background-color: green;
    margin: 0 10px;
}

.control-change{
    height: 20px;
    line-height: 20px;
    color: black;
    font-size: 10px;
    padding: 0 10px;
    background-color: yellow;
    margin: 0 10px;
}

.control-delete{
    height: 20px;
    line-height: 20px;
    color: black;
    font-size: 10px;
    padding: 0 10px;
    background-color: red;
    margin: 0 10px;
}

</style>